<template>
	<scroll-view class="content" :scroll-y="true" @scrolltolower="getGoodsList" lower-threshold="80">
		<view class="content_box">
			<view class="list" v-for="(v,k) in newList" :key="k" @click="link('/news/videoInfo/videoInfo?id='+v.id)">
				<image mode="aspectFill" :src="v.imgpath"></image>
				<view class="right">
					<view class="name overflow3">
						{{v.title}}
					</view>
					<view class="bottom">
						<view class="text">中国粉体网</view>
						<view class="tab">{{v.viewcount}}阅读</view>
					</view>
				</view>
			</view>
			<view class="loadmore">
				<uv-load-more v-if="isLoad" status="loadmore" />
				<uv-load-more v-if="!hasMore" status="nomore" />
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		homeApi
	} from "@/api/index"
	import {link} from '@/utils/utils.js'
	onLoad(()=>{
		getGoodsList()
		nextTick(()=>{
			load.value = true
		})
	})
	onShow(()=>{
		if(load.value){
			page.value = 1
			hasMore.value = true
			isLoad.value = false
			getGoodsList()
		}
	})
	const load = ref(false)
	const newList = ref([])
	const pageSize = ref(20)
	const page = ref(1)
	const hasMore = ref(true)
	const isLoad = ref(false)
	const getGoodsList = async () => {
		if (isLoad.value) return false
		if (!hasMore.value) return false
		isLoad.value = true
		let data = {
			do:'txlvideolist',
			PageNo:page.value,
			PageSiz:pageSize.value
		}
		let res = await homeApi.publicGet(data)
		let list = []
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlvideolist') {
				list = res.columns[i].items ? res.columns[i].items : []
			}
		}
		let hasmore = list.length === pageSize.value
		list = newList.value.concat(list)
		hasMore.value = hasmore
		isLoad.value = false
		page.value = page.value + 1
		newList.value = list
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		&_box{
			width: calc(100% - 60rpx);
			padding-left:30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction:column;
			.list{
				width: calc(100% - 40rpx);
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #dedede;
				image{
					width: 250rpx;
					height: 200rpx;
				}
				.right{
					width: calc(100% - 270rpx);
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						width: 100%;
						font-size: 30rpx;
					}
					.bottom{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;
						.text{
							color: #888888;
						}
						.tab{
							background: #e8e8e8;
							color: #888;
							padding: 5rpx 20rpx;
							border-radius: 15px;
						}
					}
				}
			}
		}
	}
</style>